<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>基本选择器使用</title>
    <style type="text/css">
      div, span {
        width: 140px;
        height: 140px;
        margin: 20px;
        background: #9999CC;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Roman;
      }

      div.mini {
        width: 60px;
        height: 30px;
        background: #CC66FF;
        border: #000 1px solid;
        font-size: 12px;
        font-family: Roman;
      }
    </style>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //1.改变 id 为 one 的元素的背景色为 #0000FF
      $(function () {
        $("#b1").click(
                function () {
                  var $one = $("#one");
                  $one.css("background", "#0000FF");
                })
        //2.改变 class 为 mini 的所有元素的背景色为 #FF0033
        $("#b2").click(
                function () {
                  var $mini = $(".mini")
                  $mini.css("background", "#FF0033");
                }
        )
        //3.改变元素名为 <div> 的所有元素的背景色为 #00FFFF
        $("#b3").click(
                function () {
                  var $div = $("div");
                  $div.css("background", "#00FFFF");
                }
        )
        //4.改变所有元素的背景色为 #00FF33
        $("#b4").click(
                function () {
                  var $all = $("*");
                  $all.css("background", "#00FF33");
                }
        )
        //5.改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF
        $("#b5").click(
                function () {
                  // var $span = $("span");
                  // $span.css("background", "#3399FF");
                  // var $two = $("#two");
                  // $two.css("background", "#3399FF");
                  // var $mini = $(".mini");
                  // $mini.css("background", "#3399FF");

                  $("span,#two,.mini").css("background", "#3399FF");
                }
        )
      })

    </script>
  </head>
  <body>
  <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/><br/>
  <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2"/><br/>
  <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b3"/><br/>
  <input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/><br/>
  <input type="button" value=" 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF" id="b5"/><br/>
  <hr/>
  <div id="one" class="mini">div id为one</div>
  <div id="two">div id为two</div>
  <div id="three" class="mini">div id为three</div>
  <span id="s_one" class="mini">span  one</span>
  <span id="s_two">span two</span>


  </body>
</html>